<template>
	<view class="wrap">
		<view class="goodsWrap" v-if="showList.length">
			<view class="storeItem" v-for="item in showList" :key="item.goods_id">
				<view class="pic">
					<image :src="item.goods_pic[0].pics_url" mode="widthFix"></image>
				</view>
				<view class="info">
					<view class="goodsName">{{item.goods_name}}</view>
					<view class="infoItem">
						<view class="price">￥{{item.goods_price}}</view>
						<view class="contrl">
							<view class="cut" @click="cutNum(item.goods_id)">-</view>
							<input type="text" name="" id="" :value="item.goods_num" />
							<view class="add" @click="addNum(item.goods_id)">+</view>
						</view>
					</view>
				</view>
			</view>
			<view class="control">
				<view class="totalPrice">￥{{total}}</view>
				<view class="buyIcon" @click="goOrder">立即购买</view>
			</view>
		</view>
		<view class="goodsNull" v-else>
			<image src="../../static/buycar.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name:"uni-store-item",
		props:{
			showList:Array
		},
		data() {
			return {
				total:0
			};
		},
		updated() {
			this.getTotal()
		},
		onReady() {
			this.getTotal()
			let login = uni.getStorageSync("loginInfo")
			console.log(login)
			const n = this.storeList.map(v=>{
				if(v.loginInfo == login){
					return v
				}
				
			})
			// this.storeList = n
		},
		methods:{
			goOrder(){
				uni.setStorageSync("buyList",this.showList)
				uni.showLoading({
					title:"加载中.."
				})
				setTimeout(()=>{
					uni.navigateTo({
						url:"../../pages/orderPage/orderPage"
					},
					uni.hideLoading()
					)
					// this.storeList.forEach((v,i)=>{
					// 	if(v.loginInfo == this.loginInfo){
					// 		this.storeList.splice(i,1)
					// 	}
					// })
					uni.removeStorageSync("storeList",this.storeList)
					uni.hideLoading()
				},3000)
				
			},
			getTotal(){
				let total = 0
				this.showList.forEach(v=>{
					total += v.goods_price*v.goods_num
				})
				this.total = total
			},
			addNum(id){
				console.log(id)
				this.showList.forEach((v,i)=>{
					if(v.goods_id==id){
						v.goods_num += 1
					}
				})
				this.getTotal()
				uni.setStorageSync("showList",this.showList)
			},
			cutNum(id){
				this.showList.forEach((v,i)=>{
					if(v.goods_id==id){
						if(v.goods_num>1){
							v.goods_num -= 1
							this.getTotal()
							uni.setStorageSync("showList",this.showList)
						}else{
							this.showList.splice(i,1)
							uni.showToast({
								title:"商品删除成功"
							})
							this.getTotal()
							uni.setStorageSync("storeList",this.storeList)
							
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
	
	.wrap{
		padding:30rpx 30rpx 100rpx;
		.storeItem{
			display: flex;
			border-bottom: 1rpx solid #efefef;
			.pic{
				flex: 3;
				image{
					width: 100%;
					padding: 10rpx;
				}
			}
			.info{
				flex: 5;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.goodsName{
					font-size: 32rpx;
					font-weight: bold;
				}
				.infoItem{
					display: flex;
					.price{
						flex: 1;
						color: red;
					}
					.contrl{
						flex: 2;
						display: flex;
						.add,.cut{
							width: 80rpx;
							height: 50rpx;
							background-color: #efefef;
							border: 1rpx solid gray;
							display: flex;
							justify-content: center;
							align-items: center;
						}
						input{
							width: 80rpx;
							height: 50rpx;
							background-color: #efefef;
							text-align: center;
						}
						.totalPrice{
							color: red;
						}
					}
				}
			}
		}
		.control{
			height: 100rpx;
			width: 100%;
			background-color: white;
			
			display: flex;
			align-items: center;
			position: fixed;
			bottom: 0rpx;
			z-index: 9999;
			left: 0;
			border-top: 1rpx solid #efefef;
			.totalPrice{
				flex: 5;
				margin-left: 30rpx;
				color: red;
			}
			.buyIcon{
				flex: 3;
				background-color: skyblue;
				height: 100%;
				color: white;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>